<template>
  <div class="h-full flex flex-col bg-[#fff] px-[15px] justify-between">
    <div class="grow-[1] h-0 py-[15px]">
      <el-table
        scrollbar-always-on
        ref="elTableRef"
        v-loading="state.loading"
        :data="state.list"
        height="100%"
        border
        stripe
        fit
      >
        <el-table-column prop="LotteryName" align="center" label="游戏名称" />
        <el-table-column prop="Type" align="center" label="回水类型">
          <template #default="{ row }: TableItem">
            <el-radio-group v-model="row.Type" size="small">
              <el-radio-button v-for="item in GROUP_GAME_TYPE" :key="item.key" :value="item.id">
                {{ item.text }}
              </el-radio-button>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column prop="LotteryName" align="center" width="140" label="回水时间">
          <template #default="{ row }: TableItem">
            <div class="flex justify-center items-center w-[100px] mx-auto">
              <el-time-picker v-model="row.BackTime" format="HH:mm" value-format="HH:mm" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="BackRate" align="center" label="回水比例">
          <template #default="{ row }: TableItem">
            <div class="flex items-center w-[200px] mx-auto">
              <el-input-number
                class="!w-full"
                :min="0"
                v-model="row.BackRate"
                :precision="2"
                :controls="false"
              />
              <div class="ml-[10px]">%</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pb-[15px] flex justify-between">
      <div>
        <el-alert
          title="注意: 如果当前有修改，修改后请点击【保存设置】进行保存"
          type="warning"
          show-icon
          :closable="false"
        />
      </div>
      <el-button
        :loading="state.updating"
        :disabled="state.updating"
        type="primary"
        @click="handleSubmit"
        >保存设置</el-button
      >
    </div>
  </div>
</template>
<script setup lang="ts">
import { debounce } from "lodash-es";
import { message } from "@/utils/message";
import { GROUP_GAME_TYPE } from "@/utils/constant";
import { reqBackWaterSetting, reqBackWaterSettingBatch } from "@/api/backwater";

interface TableItem {
  row: BackWaterSettingMo["GameConfig"][0];
}

const state = reactive({
  loading: false,
  updating: false,
  status: false,
  cancelEnable: false,
  list: <BackWaterSettingMo["GameConfig"]>[]
});
const getData = async () => {
  try {
    state.loading = true;
    const res = await reqBackWaterSetting();
    state.loading = false;
    state.list = res.data;
    state.list = res.data.map(item => {
      return {
        ...item,
        Type: item.Type || 1,
        BackTime: item.BackTime || "00:00"
      };
    });
  } catch (error) {
    state.loading = false;
    console.log(error);
  }
};

const handleSubmit = debounce(
  async () => {
    try {
      state.updating = true;
      await reqBackWaterSettingBatch({
        List: state.list.map(item => {
          return {
            Id: item.Id,
            Type: item.Type || 1,
            BackTime: item.BackTime || "00:00",
            BackRate: item.BackRate
          };
        })
      });
      state.updating = false;
      message.success("保存成功");
      getData();
    } catch (error) {
      state.updating = false;
      console.log(error);
    }
  },
  500,
  { leading: true, trailing: false }
);

onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
:deep() {
  .el-input,
  .el-textarea {
    --el-input-bg-color: #f4f7f8;
  }
  .el-table td.el-table__cell .el-switch {
    height: auto;
  }
}
</style>
